<template>
	<div>
		<breadcrumb></breadcrumb>
		<div class="titleBox">
			<!-- icon-dingdan -->
			<div class="iconfontcolor icon-dingdan"></div>
			<div class="infoBox">
				<div class="info_line1">
					<h3 class="tit">结算单{{ result.steelNumber }}</h3>
					<!-- 0已结算 1未结算 -->
					<!-- <div class="tag" style="background-color: #fffce8; color: #f8b030"
						v-if="result.steelState == 0 && result.allotState == 0"> -->
					<div class="tag" style="background-color: #fffce8; color: #f8b030"
						v-if="result.steelState == 0 || result.allotState == 0">
						待结算
					</div>
					<div class="tag" v-else>已结算</div>
				</div>
				<div class="info_line2">
					<div style="margin-right: 15px">
						创建时间：{{ result.createTime }}
					</div>
					<div style="margin-right: 15px" v-if="result.steelState == 1">
						支付时间：{{ result.payTime }}
					</div>
				</div>
			</div>
			<!-- <button class="examineBtn" @click="isShowDialog()" v-if="result.steelState == 0 && result.allotState == 0">
				<span>结算</span>
			</button> -->
			<div class="feeGroup" >
				<div class="feeBox">
					<div class="intervalLine"></div>
					<div class="feeItem">
						<div class="tit">货主金额</div>
						<div class="price">{{ result.orderAmount }}</div>
					</div>
				</div>
				<div class="feeBox">
					<div class="intervalLine"></div>
					<div class="feeItem">
						<div class="tit">结算金额</div>
						<div class="price" style="color: #1890ff">
							{{ result.payAmount }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="main_item">
				<titleVue :title="'基本信息'"></titleVue>
				<el-descriptions size="small" :column="3" :labelStyle="{
          color: '#262626',
          fontSize: '12px',
          fontWeight: 'bold',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
					<el-descriptions-item label="项目名称">{{
            result.projectName
          }}</el-descriptions-item>

					<el-descriptions-item label="业务类型">
						<div v-if="result.steelType == 1">拉货/搬家</div>
						<div v-else-if="result.steelType == 2">B端承运订单</div>
						<div v-else-if="result.steelType == 3">C端承运订单</div>
						<div v-else-if="result.steelType == 4">供应商订单</div>
						<div v-else-if="result.steelType == 5">撮合订单</div>
					</el-descriptions-item>
					<el-descriptions-item label="计价方式">
						<!-- pricingMethod	integer($int32)
计价方式(参考pricing_method_type)1,按里程 2,按量 -->
						<div v-if="result.priceMode == 1">按里程</div>
						<div v-else-if="result.priceMode == 2">按量</div>
					</el-descriptions-item>

					<el-descriptions-item label="计量单位">
						<!-- 计量单位(参考measure_unit_type)1,车2,吨3,件 -->
						<div v-if="result.priceUnit == 1">车</div>
						<div v-else-if="result.priceUnit == 2">吨</div>
						<div v-else-if="result.priceUnit == 3">件</div>
					</el-descriptions-item>
					<el-descriptions-item label="运量">{{
            result.transportTotal
          }}</el-descriptions-item>
					<el-descriptions-item label="负责人">{{
            result.headName
          }}</el-descriptions-item>
					<el-descriptions-item label="联系电话">{{
            result.headTel
          }}</el-descriptions-item>
				</el-descriptions>
			</div>
			<div class="main_item" v-if="result.steelState == 1">
				<titleVue :title="'结算费用'"></titleVue>
				<el-descriptions :column="3" border :labelStyle="{
          color: '#262626',
          backgroundColor: '#DDDDDD',
          width: '120px',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
					<el-descriptions-item label="承运金额">{{
            result.orderAmount + "元"
          }}</el-descriptions-item>
					<el-descriptions-item label="结算金额">{{
            result.payAmount + "元"
          }}</el-descriptions-item>
					<el-descriptions-item></el-descriptions-item>
				</el-descriptions>
			</div>

			<div class="main_item">
				<titleVue :title="'订单信息'"></titleVue>
				<div class="list">
					<!-- :header-cell-class-name="headerStyle" -->
					<!-- :row-class-name="rowStyle" -->
					<!-- :row-style="tableRowStyle" -->
					<el-table :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle" border
						style="width: 100%" :data="orderInfo">
						<el-table-column align="center" width="100px" prop="waybillStatus" label="订单状态">
							<template slot-scope="scope">
								<!-- NEW( code: 1， info:"新订单") -->
								<div class="tag gery" v-if="scope.row.orderStatus == 1">
									<div class="dian"></div>
									<div class="text">未发布</div>
								</div>
								<!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
								<div class="tag waitDispatch" v-if="scope.row.orderStatus == 4 ||
                  scope.row.orderStatus == 2 ||
                  scope.row.orderStatus == 3
                  ">
									<div class="dian"></div>
									<div class="text">未起运</div>
								</div>
								<div class="tag dispatched" v-if="scope.row.orderStatus == 5 || scope.row.orderStatus == 6
                  ">
									<!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
									<div class="dian"></div>
									<div class="text">运输中</div>
								</div>
								<div class="tag dispatched" v-if="scope.row.orderStatus == 7">
									<div class="dian"></div>
									<!-- WAITING_PAY( code: 7，info:"等待到付") -->
									<div class="text">已送达</div>
								</div>
								<div class="tag dispatched" v-if="scope.row.orderStatus == 8 || scope.row.orderStatus == 9
                  ">
									<div class="dian"></div>
									<!-- TO_SIGN( code: 8，info:"待签收")，WAITING_RECEIPT( code: 9，info:"等待签收回单”) -->
									<div class="text">待签收</div>
								</div>
								<div class="tag complete" v-if="scope.row.orderStatus == 11 || scope.row.orderStatus == 10
                  ">
									<div class="dian"></div>
									<!-- COMPLETED( code: 11， info:"已完成") code:10 已签收 -->
									<div class="text">已完成</div>
								</div>
								<div class="tag Canceled" v-if="scope.row.orderStatus == 12">
									<!-- CANCEL( code: 12， info:"订单取消"]; -->
									<div class="dian"></div>
									<div class="text">已取消</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="left" prop="waybillNo" label="订单编号">
						</el-table-column>
						<el-table-column align="left" prop="lineName" label="线路">
						</el-table-column>
						<!--            <el-table-column align="left" prop="customerName" label="下单人">-->
						<!--            </el-table-column>-->
						<el-table-column align="left" prop="supplierName" label="承运方">
						</el-table-column>
						<el-table-column align="left" prop="createTime" label="接单时间">
						</el-table-column>
						<el-table-column align="left" prop="" label="操作">
							<template slot-scope="scope">
								<div>
									<!-- @click="$router.push({ path: '/home/carrierSettlement/list/receiptDetails', query: { fleetSteelOrderId: scope.row.fleetSteelOrderId } })" -->
									<el-button type="text" size="small" @click="
                    $router.push(
                      '/home/carrierWaybill/list/details/' +
                      scope.row.waybillId
                    )
                    ">详情</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<el-dialog class="CollectionDialog" title="货主收款" :visible.sync="dialogVisible" width="400px">
			<el-form :model="CollectionForm" :rules="CollectionRules" ref="CollectionForm" label-width="100px"
				class="demoForm">
				<el-form-item label="应付金额" prop="payableAmount">
					<el-input v-model="CollectionForm.payableAmount" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="实付金额" prop="payAmount">
					<el-input v-model="CollectionForm.payAmount" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="notes">
					<el-input type="textarea" resize="none" :rows="2" placeholder="请输入内容"
						v-model="CollectionForm.notes">
					</el-input>
				</el-form-item>

				<el-form-item label="上传附件" prop="signImage">
					<!-- action	必选参数，上传的地址 -->
					<!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
					<!-- on-remove	文件列表移除文件时的钩子 -->
					<!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->
					<!-- limit	最大允许上传个数 -->
					<!-- on-exceed	文件超出个数限制时的钩子 -->
					<!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
					<el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
						:before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :on-success="onSuccess"
						:file-list="fileList" :headers="headers" v-model="CollectionForm.annex">
						<el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
						<span slot="tip" class="el-upload__tip">
							仅可上传一份合同文件，支持PDF、JPG等格式
						</span>
					</el-upload>
				</el-form-item>

				<el-form-item>
					<div class="BtnBox">
						<el-button class="Btn" @click="dialogVisible = false">取消</el-button>
						<el-button class="Btn" type="primary" @click="submitForm('CollectionForm')">确定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb.vue";
	import titleVue from "@/components/titleVue.vue";
	import httpApi from "@/http";
	import BASEURL from "@/http/BaseUrl";
	export default {
		data() {
			let validatePayRule = (rule, value, callback) => {
				let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/;
				value = value + ''
				if (value == '') {
					callback(new Error('金额不能为空'))
				} else if (value.split('.').length > 2) {
					callback('只能有一个小数点')
				} else if (!regular.test(value)) {
					callback(new Error('请输入正确面额金额'))
				} else {
					callback()
				}
			};
			return {
				result: {}, //存放数据
				orderInfo: [],
				fileList: [], //上传文件
				dialogVisible: false,
				CollectionForm: {
					notes: "",
					payableAmount: "",
					payAmount: "",
					annex: "",
				},
				CollectionRules: {
					payAmount: [{
						validator: validatePayRule,
						trigger: "blur",
					}],
					notes: [{
						max: 30,
						message: "最大30个字符",
						trigger: "blur"
					}],
				},
				headers: {
					Authorization: localStorage.getItem("token"),
				},
				url: BASEURL.TCHYURL + "/file/upload",
			};
		},
		methods: {
			tableHeaderStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FD;height:48px;paddingTop:8px;paddingBottom:8px;";
			},
			isShowDialog() {
				this.dialogVisible = true;
			},
			rowStyle({
				row,
				rowIndex
			}) {
				return "global_tableRowStyleName";
			},
			handleRemove(file, fileList) {
				//console.log(file, fileList);
				this.fileList = [];
			},
			handlePreview(file) {
				//console.log(file, 3333);
			},
			handleExceed(files, fileList) {
				this.$message.warning(
					`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
				);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
			onSuccess(response, file, fileList) {
				//console.log(response);
				this.CollectionForm.annex = response.data.url;
				this.fileList.push({
					name: response.data.name,
					url: this.response.data.url,
				});
			},
			submitForm(CollectionForm) {
				this.$refs[CollectionForm].validate((valid) => {
					if (valid) {
						let params = {
							payAmount: this.CollectionForm.payAmount,
							fleetSteelOrderId: this.$route.query.fleetSteelOrderId,
							remark: this.CollectionForm.notes,
							fileUrls: this.CollectionForm.annex,
						};
						httpApi.carrierSettlementApi.calculateReceipt(params).then((res) => {
							if (res.data.code == 200) {
								this.$message.success("收款单结算成功");
								this.$router.go(0);
							} else {
								this.$message.error("收款单结算失败");
								return false;
							}
						});
					} else {
						//console.log("error submit!!");
						return false;
					}
				});
			},
			getDetails() {
				let params = {
					id: this.$route.query.fleetSteelOrderId,
				};
				httpApi.carrierSettlementApi
					.receiptSupplierDetails(params)
					.then((res) => {
						////console.log('收款款单(平台)详情结果', res);
						this.result = res.data.data;
						this.orderInfo = res.data.data.orderInfoList;
						this.CollectionForm.payableAmount = res.data.data.orderAmount;
						this.CollectionForm.payAmount = res.data.data.orderAmount;
					});
			},
		},

		mounted() {
			this.getDetails();
		},
		components: {
			breadcrumb,
			titleVue,
		},
	};
</script>

<style lang="scss" scoped>
	.titleBox {
		flex: 1;
		background-color: #fff;
		height: 119px;
		display: flex;
		align-items: center;
		padding: 0 35px;
		margin-bottom: 9px;

		.feeGroup {
			margin-left: auto;
			display: flex;

			.feeBox {
				display: flex;
				width: 180px;
				align-items: center;

				.intervalLine {
					width: 2px;
					height: 64px;
					background-color: #f0f0f0;
					margin-right: 20px;
				}

				.feeItem {
					display: flex;
					flex-direction: column;
					margin-right: 20px;

					.tit {
						color: #a3a3a3;
						font-size: 12px;
						margin-bottom: 14px;
					}

					.price {
						color: #262626;
						font-size: 18px;
						font-weight: Bold;
					}
				}
			}
		}

		.icon-dingdan {
			font-size: 43px;
			margin-right: 10px;
		}

		.infoBox {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.info_line1 {
				margin-bottom: 3px;
				display: flex;
				align-items: center;

				>.tit {
					font-size: 18px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					margin-right: 8px;
					color: #262626;
				}

				>.tag {
					background-color: #ecf5fe;
					border-radius: 4px;
					width: 54px;
					height: 20px;
					color: #1890ff;
					font-size: 10px;
					text-align: center;
					line-height: 20px;
				}
			}

			.info_line2 {
				display: flex;
				color: #939393;
				font-size: 12px;
			}
		}

		.examineBtn {
			background-color: #1890ff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			color: #ffffff;
			font-size: 12px;
			width: 80px;
			height: 36px;
			cursor: pointer;
			margin-left: auto;

			&:hover {
				opacity: 0.8;
				transition: 0.2s;
			}
		}
	}

	.main {
		padding: 30px;
		background-color: #fff;
		height: calc(100vh - 255px);
		overflow-y: scroll;

		.main_item {
			padding-bottom: 33px;

			::v-deep .el-table__cell {
				padding: 0px;
			}

			.tag {
				width: 63px;
				height: 28px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;

				.dian {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					margin-right: 4px;
				}

				// 待派车标签 样式
				&.waitDispatch {
					background-color: #fffce8;
					color: #f9aa0d;

					.dian {
						background-color: #f9aa0d;
					}
				}

				&.gery {
					background-color: #f7f8f8;
					color: #a8b0b6;

					.dian {
						background-color: #a8b0b6;
					}
				}

				//已派车 和运输中 样式
				&.dispatched {
					background-color: #ecf5fe;
					color: #1890ff;

					.dian {
						background-color: #1890ff;
					}
				}

				//已完成
				&.complete {
					background-color: #ebfef5;
					color: #1acb7a;

					.dian {
						background-color: #1acb7a;
					}
				}

				//已取消
				&.Canceled {
					background-color: #fde8e9;
					color: #f5222d;

					.dian {
						background-color: #f5222d;
					}
				}
			}
		}
	}
</style>